<template>
	<view class="box">
		<view class="li" v-for="item in dataList" :key="item.address_id" @click="handleSelect(item)">
			<view class="left">
				<view class="top-name">
					<view class="name">
						{{item.consignee}}
					</view>
					<view class="phone">
						{{maskPhoneNum(item.mobile)}}
					</view>
				</view>
				<view class="bottom-crty oneline-hide">
					{{item.region + item.address}}
				</view>
			</view>
			<view class="right" @click.stop="$navTo('pages/mines/addressDetails', {type: 'edit', id:item.address_id})">
				<u-icon name="edit-pen-fill" color="#eaa048"></u-icon>
			</view>
		</view>
		<u-empty v-if="dataList.length<1" mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" textSize="30rpx"
			width="360" height="380" text="地址空空如也...">
		</u-empty>
		<view class="btn" @click="$navTo('pages/mines/addressDetails')">
			新增地址
		</view>
	</view>
</template>

<script>
	import {
		AddressApi
	} from '@/api';
	export default {
		data() {
			return {
				// 选中模式
				type: false,
				dataList: []
			};
		},
		onLoad({
			type,
			redirect
		}) {
			if (type === 'select') {
				this.type = true
			}
		},
		onShow() {
			this.getAddress()
		},
		methods: {
			getAddress() {
				AddressApi.UserAddressList()
					.then(res => {
						this.dataList = res.result
					})
					.catch(err => {
						console.log(err);
					})
			},
			maskPhoneNum(phoneNum) {
				// 使用正则表达式替换中间的数字为 *
				return phoneNum.replace(/(\d{3})\d*(\d{4})/, '$1****$2');
			},
			/** 
			 * 点击地址
			 */
			handleSelect(data) {
				if (!this.type) {
					return
				}
				uni.$emit('selectAddress', data)
				uni.navigateBack()
			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .uicon-edit-pen-fill {
		font-size: 46rpx !important;
	}

	.box {
		width: 100vw;
		box-sizing: border-box;
		padding: 30rpx;
		overflow-y: auto;
		padding-bottom: 228rpx;

		.btn {
			position: fixed;
			bottom: calc(30rpx + constant(safe-area-inset-bottom));
			bottom: calc(30rpx + env(safe-area-inset-bottom));
			left: 30rpx;
			width: 690rpx;
			height: 88rpx;
			border-radius: 50rpx;
			opacity: 1;
			background: linear-gradient(173.2deg, #f8b280 0%, #ff8b38 100%);
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			font-size: 30rpx;
		}

		.li {
			width: 690rpx;
			height: 151rpx;
			border-radius: 12rpx;
			opacity: 1;
			background: #ffffff;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 36rpx;

			.left {
				flex: 1;
				margin-right: 40rpx;

				.top-name {
					display: flex;
					align-items: center;

					.name {
						font-size: 30rpx;
						font-weight: 400;
						margin-right: 14rpx;
					}

					.phone {
						color: #606060;
						font-size: 26rpx;
						font-weight: 400;
					}
				}

				.bottom-crty {
					font-size: 26rpx;
					font-weight: 400;

				}
			}
		}
	}
</style>